<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../semantic/dist/semantic.min.css">
    <title>semantic-ui</title>
    <style>
        button {
            margin-bottom: 10px!important;
        }

        .ui .vertical>button {
            margin: 0!important;
        }
    </style>
</head>

<body>
    <div class="ui container" style="padding: 50px">

        <h1 class="ui dividing header">Button</h2>

        <button class="ui button mini">Mini</button>
        <button class="ui button tiny">Tiny</button>
        <button class="ui button small">Small</button>
        <button class="ui button medium">Medium</button>
        <button class="ui button large">Large</button>
        <button class="ui button big">Big</button>
        <button class="ui button huge">Huge</button>
        <button class="ui button massive">Massive</button>

        <div class="ui divider"></div>

        <div class="ui button primary">按钮</div>

        <div class="ui animated button secondary" tabindex="0">
            <div class="visible content">Next Page</div>
            <div class="hidden content">
                <i class="right arrow icon"></i>
            </div>
        </div>
        <div class="ui vertical animated button positive">
            <div class="visible content">To The Top</div>
            <div class="hidden content">I'm Top</div>
        </div>
        <div class="ui fade animated button negative">
            <div class="visible content">I'm Fade</div>
            <div class="hidden content">so lost</div>
        </div>

        <div class="ui divider"></div>

        <div class="ui labeled button">
            <div class="ui button"><i class="icon heart"></i></div>
            <div class="ui basic label">1,024</div>
        </div>
        <div class="ui labeled button">
            <div class="ui button"><i class="heart icon"></i> Like </div>
            <div class="ui basic left pointing label">2,048</div>
        </div>
        <div class="ui labeled button">
            <div class="ui button red"><i class="icon heart"></i> Like </div>
            <div class="ui basic red left pointing label">1,024</div>
        </div>
        <div class="ui labeled button">
            <div class="ui basic blue button"><i class="icon heart"></i> Like </div>
            <div class="ui basic blue left pointing label">2,048</div>
        </div>

        <div class="ui divider"></div>

        <button class="ui basic button red"><i class="smile icon"></i> Some One Like U </button>
        <button class="ui button green labeled icon"><i class="heart icon"></i>原谅色</button>
        <button class="ui right labeled icon button red basic"><i class="right heart icon"></i>当然是选择原谅他</button>

        <div class="ui divider"></div>

        <button class="ui button basic primary">Primary</button>
        <button class="ui button basic secondary">Secondary</button>
        <button class="ui button basic positive">Positive</button>
        <button class="ui button basic negative">Negative</button>

        <div class="ui divider"></div>

        <div class="ui segment">
            <button class="ui button basic red">Red</button>
            <button class="ui button basic orange">Orange</button>
            <button class="ui button basic yellow">Yellow</button>
            <button class="ui button basic olive">Olive</button>
            <button class="ui button basic green">Green</button>
            <button class="ui button basic teal">Teal</button>
            <button class="ui button basic blue">Blue</button>
            <button class="ui button basic violet">Violet</button>
            <button class="ui button basic purple">Purple</button>
            <button class="ui button basic pink">Pink</button>
            <button class="ui button basic brown">Brown</button>
            <button class="ui button basic grey">Grey</button>
            <button class="ui button basic black">Black</button>
        </div>

        <div class="ui inverted segment">
            <button class="ui inverted button">Standard</button>
            <button class="ui inverted red button">Red</button>
            <button class="ui inverted orange button">Orange</button>
            <button class="ui inverted yellow button">黄色</button>
            <button class="ui inverted olive button">Olive</button>
            <button class="ui inverted green button">Green</button>
            <button class="ui inverted teal button">Teal</button>
            <button class="ui inverted blue button">Blue</button>
            <button class="ui inverted violet button">紫罗兰色</button>
            <button class="ui inverted purple button">紫色</button>
            <button class="ui inverted pink button">粉色</button>
            <button class="ui inverted brown button">褐色</button>
            <button class="ui inverted grey button">灰色</button>
            <button class="ui inverted black button">Black</button>
        </div>

        <div class="ui inverted segment">
            <button class="ui inverted button basic red">Red</button>
            <button class="ui inverted button basic orange">Orange</button>
            <button class="ui inverted button basic yellow">Yellow</button>
            <button class="ui inverted button basic olive">Olive</button>
            <button class="ui inverted button basic green">Green</button>
            <button class="ui inverted button basic teal">Teal</button>
            <button class="ui inverted button basic blue">Blue</button>
            <button class="ui inverted button basic violet">Violet</button>
            <button class="ui inverted button basic purple">Purple</button>
            <button class="ui inverted button basic pink">Pink</button>
            <button class="ui inverted button basic brown">Brown</button>
            <button class="ui inverted button basic grey">Grey</button>
            <button class="ui inverted button basic black">Black</button>
        </div>

        <div class="ui divier"></div>

        <div class="ui buttons">
            <button class="ui button">1</button>
            <button class="ui button">2</button>
            <button class="ui button">3</button>
        </div>

        <div class="ui buttons">
            <button class="ui button active"><i class="icon align left"></i></button>
            <button class="ui button"><i class="icon align center"></i></button>
            <button class="ui button"><i class="icon align right"></i></button>
            <button class="ui button"><i class="icon align justify"></i></button>
        </div>

        <div class="ui divider"></div>

        <div class="ui buttons">
            <button class="ui button positive">Enter</button>
            <div class="or"></div>
            <button class="ui button negative">Cancel</button>
        </div>

        <div class="ui buttons">
            <button class="ui button yellow">Happy</button>
            <div class="or" data-text="&"></div>
            <button class="ui button yellow">Hacking</button>
        </div>

        <div class="ui divider"></div>

        <button class="ui button active"><i class="user icon"></i> Follow </button>
        <button class="ui button disabled"><i class="user icon"></i> Follow </button>
        <button class="ui button loading positive">loading</button>
        <button class="ui facebook button"><i class="facebook icon"></i> Facebook </button>

        <div class="ui divider"></div>

        <div>
            <button class="ui left floated button"> Left Floated </button>
            <button class="ui right floated button"> Right Floated </button>
        </div>

        <div class="ui clearing divider"></div>

        <button class="ui button compact">内边距小一点</button>
        <button class="ui icon button compact"><i class="icon pause"></i></button>
        <button class="ui compact button icon labeled"><i class="icon pause"></i> Pause </button>
        <button class="ui button compact toggle">toggle</button>

        <button class="ui button fluid"> Fluid </button>

        <button class="ui button icon circular"><i class="icon settings"></i></button>
        <button class="ui button icon circular facebook"><i class="icon facebook"></i></button>
        <button class="ui button icon circular twitter"><i class="icon twitter"></i></button>
        <button class="ui button icon circular google plus"><i class="icon google plus"></i></button>

        <div class="ui divider"></div>

        <div class="ui top attached button"> Top </div>
        <div class="ui attached segment">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore dolorum laborum hic illo perspiciatis dolorem, quibusdam animi officia dolore. Quaerat in necessitatibus praesentium facere harum sapiente rem dolore vitae illum!</p>
        </div>
        <div class="ui bottom attached button"> Bottom </div>

        <div class="ui divider"></div>

        <div class="ui buttons two">
            <button class="ui attached button"> Left </button><button class="ui attached button"> Right </button>
        </div>

        <div class="ui divider"></div>

        <div class="ui vertical buttons">
            <button class="ui button active">1</button>
            <button class="ui button">2</button>
            <button class="ui button">3</button>
            <button class="ui button">4</button>
        </div>


        <!-- 同一个组的按钮可以有共同的颜色和大小 -->
        <div class="ui buttons red huge compact">
            <button class="ui button">1</button>
            <button class="ui button active">2</button>
            <button class="ui button">3</button>
        </div>

    </div>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../semantic/dist/semantic.min.js"></script>
    <script>
    $(".toggle").on('click', function () {
        $(this).toggleClass('active');
    })
    </script>
</body>

</html>
